<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-form label-width="160px" :model="form" label-position="right" ref="formRef" :rules="formRules" disabled
            class="borderNone">
            <el-card class="initCard">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="送样日期" prop="deliverDate">
                            <el-input v-model="form.deliverDate" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
                        <el-form-item prop="sampleAuditId">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">样品评审表</span>
                            </template>
                            <span class="link-type" @click="toDetail">{{ form.sampleAuditNumber }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <el-form-item label="材质" prop="materialQuality">
                            <el-input v-model="sampleAudit.materialQuality" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="样品图号">
                            <el-input v-model="sampleAudit.drawingNo" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="样品数量">
                            <el-input v-model="sampleAudit.amount" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="炭刷规格">
                            <el-input v-model="sampleAudit.carbonBrushSpec" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户名称" prop="custName">
                            <el-input v-model="form.custName" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="diliverById">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">送样人</span>
                            </template>
                            <el-input v-model="form.diliverByName" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="送样部门">
                            <el-input v-model="sampleAudit.deptName" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="completedStatus">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">评审表完成状态</span>
                            </template>
                            <el-input v-model="form.completedStatusName" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="过滤已送样过的销货单">
                            <el-checkbox v-model="form.injectionConditionKey" true-label="excludeSendSample" false-label=""
                                @change="check" disabled></el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 10px;">
                <template #header>
                    <div class="card-header">
                        <span>样品清单</span>
                    </div>
                </template>
                <el-table :data=dataList>
                    <el-table-column label="销货单号" width="200" prop="omOrderNumber">
                    </el-table-column>
                    <el-table-column label="客户订单号" width="200" prop="custOrderNumber">
                    </el-table-column>
                    <el-table-column label="销货日期" width="200" prop="omOrderDate"></el-table-column>
                    <el-table-column label="样品编号" width="200" prop="mtlNo">
                    </el-table-column>
                    <el-table-column label="样品名称" width="150" prop="mtlName"></el-table-column>
                    <el-table-column label="样品规格" width="200" prop="mtlSpec">
                    </el-table-column>
                    <el-table-column label="样品单位" width="100" prop="mtlUnitName">
                    </el-table-column>
                    <el-table-column label="数量" width="100" prop="qty">
                    </el-table-column>
                    <el-table-column label="摘要" width="300" prop="remark">
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card style="margin-top: 5px; margin-bottom: 10px;">
                <el-form-item label="备注">
                    <el-input style="width: 700px;" v-model="form.remark" :autosize="{ minRows: 2 }" type="textarea"
                        placeholder="请输入" />
                </el-form-item>
            </el-card>
        </el-form>
        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
        </div>
        <div class="sampleDialog"></div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch, computed, getCurrentInstance, createVNode, render } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/sample'
import sysApi from '@/api/model/system'
import tsLayer from '@/utils/useDialog'
const instance = getCurrentInstance()
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const form = ref({
})
const sampleAudit = ref({})
const dataList = ref([])
const formRef = ref()
const samples = ref({})
const formRules = reactive({
    deliverDate: [
        { required: true, message: "请输入送样日期", trigger: "change" }
    ]
})
onMounted(() => {
    getInit()
})
const getInit = async () => {
    let res = await Api.sendSample.detail.post(props.paramsData)
    if (res.code == '200') {
        form.value = res.data
        sampleAudit.value = res.data.sampleAudit !== null ? res.data.sampleAudit : {}
        dataList.value = res.dataList
    }
}
const check = (val) => {
    dataSource.value.ErpOrderDtlReport.fieldMap.injectionConditionKey = val
}
//打开样品评审表详情对话框
const toDetail = () => {
    const box = document.querySelector(".sampleDialog")
    if (form.value.sampleAuditId) {
        let paramsData = {
            id: form.value.sampleAuditId
        }
        import(`@/views/sample/audittable/detailSampleAudit.vue`).then((res) => {
            const form = createVNode(res.default, {
                paramsData,
                onUpdatetable(val) {
                    render(null, box)
                }
            })
            tsLayer.open({
                title: '查看样品评审表',
                width: '70%',
                fullScreen: false,
                appContext: instance.appContext,
                box: box,
                content: form
            })
        })
    }
    else {
        ElNotification.info({ title: '', message: '请选择样品评审表！', duration: 2000 });
    }
}
const updateVisible = (val) => {
    emit('updatetable')
}


</script>
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }

    :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;
    }
}

.link-type,
.link-type:focus {
    color: #337ab7;
    cursor: pointer;
}

.link-type:focus:hover,
.link-type:hover {
    color: #20a0ff
}
</style>



